<div ng-controller="tenant.views.dashboard.index as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>@L("Dashboard")</span> <small>@L("DashboardHeaderInfo")</small>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">

        </div>
    </div>

    <div class="note note-info note-bordered">
        <h3>@L("DashboardDemo_Note_Title")<span class="close" data-close="note"></span></h3>
        <p>
            @L("DashboardDemo_Note_Info")
        </p>
        <br />
        <h4>@L("LookingForMpaVersion")</h4>
        <p>
            <a href="@Url.Action("Index", "Home", new {area = "Mpa"})">
                @Html.Raw(L("DashboardNoteForMpaVersion"))
            </a>
        </p>
    </div>

    <div class="row margin-top-10">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="dashboard-stat2">
                <div class="display">
                    <div class="number">
                        <h3 class="font-green-sharp">
                            7800<small class="font-green-sharp">$</small>
                        </h3>
                        <small>TOTAL PROFIT</small>
                    </div>
                    <div class="icon">
                        <i class="icon-pie-chart"></i>
                    </div>
                </div>
                <div class="progress-info">
                    <div class="progress">
                        <span style="width: 76%;" class="progress-bar progress-bar-success green-sharp">
                            <span class="sr-only">76% progress</span>
                        </span>
                    </div>
                    <div class="status">
                        <div class="status-title">
                            progress
                        </div>
                        <div class="status-number">
                            76%
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="dashboard-stat2">
                <div class="display">
                    <div class="number">
                        <h3 class="font-red-haze">1349</h3>
                        <small>NEW FEEDBACKS</small>
                    </div>
                    <div class="icon">
                        <i class="icon-like"></i>
                    </div>
                </div>
                <div class="progress-info">
                    <div class="progress">
                        <span style="width: 85%;" class="progress-bar progress-bar-success red-haze">
                            <span class="sr-only">85% change</span>
                        </span>
                    </div>
                    <div class="status">
                        <div class="status-title">
                            change
                        </div>
                        <div class="status-number">
                            85%
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="dashboard-stat2">
                <div class="display">
                    <div class="number">
                        <h3 class="font-blue-sharp">567</h3>
                        <small>NEW ORDERS</small>
                    </div>
                    <div class="icon">
                        <i class="icon-basket"></i>
                    </div>
                </div>
                <div class="progress-info">
                    <div class="progress">
                        <span style="width: 45%;" class="progress-bar progress-bar-success blue-sharp">
                            <span class="sr-only">45% grow</span>
                        </span>
                    </div>
                    <div class="status">
                        <div class="status-title">
                            grow
                        </div>
                        <div class="status-number">
                            45%
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="dashboard-stat2">
                <div class="display">
                    <div class="number">
                        <h3 class="font-purple-soft">276</h3>
                        <small>NEW USERS</small>
                    </div>
                    <div class="icon">
                        <i class="icon-user"></i>
                    </div>
                </div>
                <div class="progress-info">
                    <div class="progress">
                        <span style="width: 57%;" class="progress-bar progress-bar-success purple-soft">
                            <span class="sr-only">56% change</span>
                        </span>
                    </div>
                    <div class="status">
                        <div class="status-title">
                            change
                        </div>
                        <div class="status-number">
                            57%
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-sm-12">
            <!-- BEGIN PORTLET-->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption caption-md">
                        <i class="icon-bar-chart font-green-haze hide"></i>
                        <span class="caption-subject font-green-haze bold uppercase">Sales Summary</span>
                        <span class="caption-helper hide">weekly stats...</span>
                    </div>
                    <div class="actions">
                        <div class="btn-group btn-group-devided" data-toggle="buttons">
                            <label class="btn btn-transparent grey-salsa btn-circle btn-sm active">
                                <input type="radio" name="options" class="toggle" id="option1">Today
                            </label>
                            <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
                                <input type="radio" name="options" class="toggle" id="option2">Week
                            </label>
                            <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
                                <input type="radio" name="options" class="toggle" id="option2">Month
                            </label>
                        </div>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row list-separated">
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="font-grey-mint font-sm">
                                Total Sales
                            </div>
                            <div class="uppercase font-hg font-red-flamingo">
                                13,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="font-grey-mint font-sm">
                                Revenue
                            </div>
                            <div class="uppercase font-hg font-green-haze">
                                4,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="font-grey-mint font-sm">
                                Expenses
                            </div>
                            <div class="uppercase font-hg font-purple">
                                11,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="font-grey-mint font-sm">
                                Growth
                            </div>
                            <div class="uppercase font-hg font-blue-sharp">
                                9,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </div>
                    </div>
                    <ul class="list-separated list-inline-xs hide">
                        <li>
                            <div class="font-grey-mint font-sm">
                                Total Sales
                            </div>
                            <div class="uppercase font-hg font-red-flamingo">
                                13,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </li>
                        <li>
                        </li>
                        <li class="border">
                            <div class="font-grey-mint font-sm">
                                Revenue
                            </div>
                            <div class="uppercase font-hg font-green-haze">
                                4,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <div class="font-grey-mint font-sm">
                                Expenses
                            </div>
                            <div class="uppercase font-hg font-purple">
                                11,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <div class="font-grey-mint font-sm">
                                Growth
                            </div>
                            <div class="uppercase font-hg font-blue-sharp">
                                9,760 <span class="font-lg font-grey-mint">$</span>
                            </div>
                        </li>
                    </ul>
                    <div id="sales_statistics" class="portlet-body-morris-fit morris-chart" style="height: 260px">
                    </div>
                </div>
            </div>
            <!-- END PORTLET-->
        </div>

        <div class="col-md-6 col-sm-12">
            <!-- BEGIN PORTLET-->
            <div class="portlet light ">
                <div class="portlet-title">
                    <div class="caption caption-md">
                        <i class="icon-bar-chart font-green-haze hide"></i>
                        <span class="caption-subject font-green-haze bold uppercase">Member Activity</span>
                        <span class="caption-helper hide">weekly stats...</span>
                    </div>
                    <div class="actions">
                        <button class="btn btn-success btn-rounded" ng-click="vm.getMemberActivity()"><i class="fa fa-refresh"></i> Refresh</button>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row number-stats margin-bottom-30">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="stat-left">
                                <div class="stat-chart">
                                    <!-- do not line break "sparkline_bar" div. sparkline chart has an issue when the container div has line break -->
                                    <div id="totalMembersChart"></div>
                                </div>
                                <div class="stat-number">
                                    <div class="title">
                                        Total
                                    </div>
                                    <div class="number">
                                        2460
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="stat-right">
                                <div class="stat-chart">
                                    <!-- do not line break "sparkline_bar" div. sparkline chart has an issue when the container div has line break -->
                                    <div id="newMembersChart"></div>
                                </div>
                                <div class="stat-number">
                                    <div class="title">
                                        New
                                    </div>
                                    <div class="number">
                                        719
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-scrollable table-scrollable-borderless">
                        <table class="table table-hover table-light">
                            <thead>
                                <tr class="uppercase">
                                    <th colspan="2">
                                        MEMBER
                                    </th>
                                    <th>
                                        Earnings
                                    </th>
                                    <th>
                                        CASES
                                    </th>
                                    <th>
                                        CLOSED
                                    </th>
                                    <th>
                                        RATE
                                    </th>
                                </tr>
                            </thead>
                            <tr>
                                <td class="fit">
                                    <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar4.jpg">
                                </td>
                                <td>
                                    <a href="javascript:;" class="primary-link">Brain</a>
                                </td>
                                <td>
                                    $345
                                </td>
                                <td>
                                    45
                                </td>
                                <td>
                                    124
                                </td>
                                <td>
                                    <span class="bold font-green-haze">80%</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fit">
                                    <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar5.jpg">
                                </td>
                                <td>
                                    <a href="javascript:;" class="primary-link">Nick</a>
                                </td>
                                <td>
                                    $560
                                </td>
                                <td>
                                    12
                                </td>
                                <td>
                                    24
                                </td>
                                <td>
                                    <span class="bold font-green-haze">67%</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fit">
                                    <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar6.jpg">
                                </td>
                                <td>
                                    <a href="javascript:;" class="primary-link">Tim</a>
                                </td>
                                <td>
                                    $1,345
                                </td>
                                <td>
                                    450
                                </td>
                                <td>
                                    46
                                </td>
                                <td>
                                    <span class="bold font-green-haze">98%</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fit">
                                    <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar7.jpg">
                                </td>
                                <td>
                                    <a href="javascript:;" class="primary-link">Tom</a>
                                </td>
                                <td>
                                    $645
                                </td>
                                <td>
                                    50
                                </td>
                                <td>
                                    89
                                </td>
                                <td>
                                    <span class="bold font-green-haze">58%</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!-- END PORTLET-->
        </div>
    </div>
</div>